<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.6.11.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
<div id="app">
    <button @click="testGet">get请求</button>
    <button @click="testPost">post请求</button>
    <button @click="testPut">put请求</button>
    <button @click="testDelete">delete请求</button>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
        },
        methods:{
            testGet(){
                //get() 请求路径和请求参数的
                //then() 成功的回调（后端执行成功，执行的方法）
                //catch()  失败后的回调（后端执行有异常，执行的方法)
                axios.get("/user/1").then((response)=>{
                    console.log(response.data);
                }).catch((err)=>{
                    console.log(err);
                });
            },
            testPost(){
                axios.post("/user").then((response)=>{
                    console.log(response.data);
                }).catch((err)=>{
                    console.log(err);
                });
            },
            testPut(){
                axios.put("/user").then((response)=>{
                    console.log(response.data);
                }).catch((err)=>{
                    console.log(err);
                });
            },
            testDelete(){
                axios.delete("/user/2").then((response)=>{
                    console.log(response.data);
                }).catch((err)=>{
                    console.log(err);
                });
            }

        }
    });
</script>

</html>